"use client";
import { useState, useEffect } from "react";

const COLORS = [
  { name: "蓝色", value: "#2563eb" },
  { name: "绿色", value: "#10b981" },
  { name: "紫色", value: "#7c3aed" },
  { name: "红色", value: "#ef4444" },
  { name: "橙色", value: "#f59e42" },
];

export function PrimaryColorToggle() {
  const [color, setColor] = useState("#2563eb");

  useEffect(() => {
    const saved = localStorage.getItem("primary-color");
    if (saved) {
      setColor(saved);
      document.documentElement.style.setProperty("--primary", saved);
    } else {
      document.documentElement.style.setProperty("--primary", color);
    }
  }, []);

  const handleChange = (value: string) => {
    setColor(value);
    document.documentElement.style.setProperty("--primary", value);
    localStorage.setItem("primary-color", value);
  };

  return (
    <div className="flex items-center gap-2">
      <span className="text-sm text-muted-foreground">主色：</span>
      {COLORS.map((c) => (
        <button
          key={c.value}
          className="w-6 h-6 rounded-full border-2 border-border flex items-center justify-center"
          style={{
            background: c.value,
            outline: color === c.value ? "2px solid #222" : "none",
          }}
          aria-label={`切换主色为${c.name}`}
          onClick={() => handleChange(c.value)}
          type="button"
        />
      ))}
    </div>
  );
}
